<template>
    <div>
        <!-- <h3>{{$store.getters.bigSum}}</h3> -->
        <!-- <h3>{{$store.state.sum}}</h3> -->
        <select v-model.number="n">
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
        </select>
        <!-- <button @click="increase">+</button>
        <button @click="decrease">-</button> -->
        <button @click="increase(n)">+</button>
        <button @click="decrease(n)">-</button>
        <button @click="increaseOdd(n)">value是奇数再加</button>
        <button @click="increaseWait(n)">等1s再加</button>
        <!-- vuex的组件共享复用 -->
        <h4>{{personList.length}}</h4>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
    export default {
        name : "Count",
        data(){
            return {
                n:1,
                sum:0,
                school:"属性",
                subject:"",
            }
        },
        computed:{
            // sum(){
            //     return this.$store.state.sum
            // },
            //可以简写成如下
            //借助mapstate生成计算属性，从state里面读取数据
            ...mapState([
                'sum',
                'n',
                'school',
                'subject',
                'personList',
            ]),
            // bigSum(){
            //     return this.$getters.bigSum
            // },
            //可以简写成如下
            //借助mapGetters生成计算属性，从getters里面读取数据
            ...mapGetters([
                'bigSum',
            ])
        },
        methods:{
            // 自己写代码
            // increase(){
            //     console.log(this, '')
            //     this.$store.comit('increase',this.n)
            // },
            // decrease(){
            //     this.$store.comit('decrease',this.n)
            // },
            //可以简写成如下
            //借助mapMutations生成计算方法，调用commit向Mutation调用方法(对象写法)
            ...mapMutations({
                increase2:'increase',
                decrease2:'decrease',
            }),
            //如果前后保持一致，则可以写成数组写法
            ...mapMutations([
                'increase',
                'decrease',
            ]),
            // 生成的代码是
            // increase2(value){
            //     this.$store.comit('increase',value)
            // },
            //所以调用的函数必须传参
            //所以可以配合写一些复杂方法
            // increase(){
            //     this.increase2(this.n)
            // },
            // decrease(){
            //     this.decrease2(this.n)
            // },
            // 如果简单的话，就在模板里面传参即可
            // 如果不传参则传入的是event
            // 自己写代码
            // increaseOdd(){
            //     if(this.$store.state.sum%2){
            //         this.$store.dispatch('increaseOdd',this.n)
            //     }
            // },
            // increaseWait(){
            //     this.$store.dispatch('increaseWait',this.n)
            // },
            // ...mapActions({
            //     increaseOdd:'increaseOdd',
            //     increaseWait:'increaseWait',
            // }),
            // 前后一致可以简写成数组形式
            ...mapActions([
                'increaseOdd',
                'increaseWait',
            ]),
        }
    }
</script>

<style scoped>
    button{
        margin : 5px;
    }
    select{
        margin : 5px;
    }
</style>